<!-- 统计分析 - 数据目录 -->
<script>
import { defineComponent } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
import iconHushu from '@/components/LayerTree/images/icon-户数.svg';
import iconMianji from '@/components/LayerTree/images/icon-面积.svg';
import Api from "@/api";
let MyChart = null;
let resetHushuArea = () => { }
function EchartsRenderArea(cateData, mainTotal) {
  mainTotal = Number(Number(mainTotal).toFixed(0));
  MyChart = echarts.init(document.getElementById('Gongretongji-B'));
  // ab5252
  let color = ['#ab5252', '#d9b05d', '#cbe75c', '#9fe16f', '#5267ab', '#25429d', '#582e85']
  let option = {
    color: color,
    title: {
      left: 'center',
      top: '50%',
      textStyle: {
        fontSize: 16,
        color: '#fff',
        fontWeight: 'normal'
      }
    },
    grid: {
      top: '20%'
    },
    tooltip: {
      trigger: 'item',
      formatter: function (param) {
        const result = param.marker + param.name + ' : ' + param.value + ' ' + '件<br/>';
        return result;
      },
      textStyle: {
        fontFamily: 'ALIBABAPUHUI-REGU'
      }
    },
    legend: {
      left: 20,
      top: 10,
      itemWidth: 13,
      itemHeight: 8,
      borderRadius: 0,
      icon: 'rect',
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1,
      },
      textStyle: {
        color: '#fff',
        fontSize: '14',
        fontFamily: 'ALIBABAPUHUI-REGU'
      }
    },
    series: [{
      type: 'pie',
      // roseType: 'radius',
      center: ['50%', '60%'],
      radius: ['30%', '40%'],
      data: cateData,
      label: {
        normal: {
          formatter: '{font|{c}}\n{hr|}\n{font|{d}%}',
          rich: {
            font: {
              fontSize: 12,
              padding: [5, 0],
              color: '#fff'
            },
            hr: {
              height: 0,
              borderWidth: 1,
              width: '100%',
              borderColor: '#fff'
            }
          }
        },
      },
      labelLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      emphasis: {
        itemStyle: {
          borderColor: '#fff', // 边框颜色
          borderWidth: 2,        // 边框宽度
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0,0,0,0.5)'
        }
      }
    }],
    graphic: [
      {
        type: 'text',
        left: 'center',
        bottom: '30%',
        style: {
          fontFamily: 'alimamashuheiti',
          text: '总计(件)', // 要显示的数字
          textAlign: 'center',
          fill: '#fff', // 文字颜色
          fontSize: 12,
          lineHeight: 20,
        }
      },
      {
        type: 'text',
        left: 'center',
        bottom: '40%',
        z: 10,
        style: {
          fontFamily: 'alimamashuheiti',
          text: mainTotal, // 要显示的数字
          textAlign: 'center',
          fill: '#fff', // 文字颜色
          fontSize: 20,
          lineHeight: 20,
        }
      }
    ]
  };

  MyChart.on('legendselectchanged', function (params) {
    const selected = params.selected;
    let mainTotal = 0;
    cateData.forEach(v => {
      if(selected[v.name]) {
        mainTotal = mainTotal + v.value
      }
    })
    option.graphic[1].style.text = mainTotal;
    MyChart.setOption(option);
  })

  MyChart.setOption(option);
}
export default defineComponent({
  name: "SectionOne",
  components: {
    GlobalCard,
  },
  setup() {
  },
  data() {
    return {
      // 记录当前应该查询的数据的情况，比如该数据是在查供热企业？热源？换热站？供热范围？
      recordData: {
        // all 全部
        // part 分部
        dataType: 'all',
        // enterprise 企业
        // heat-source 热源
        // heat-huanre 换热站
        // heat-fanwei 供热范围
        type: 'enterprise',
        // 携带的数据
        data: null
      },
      iconHushu: iconHushu,
      iconMianji: iconMianji,
      data_5: 0,
      data_6: 0,
      activeId: 'count',
    }
  },
  mounted() {
    setTimeout(() => {
      this.setSelect(this.activeId);
      // this.initOrigin();
    }, 30)

    // 重置户数数据 面积数据 重要
    resetHushuArea = ({ data, type, dataType }) => {
      this.recordData.type = type;
      // 需要查全部数据还是部分数据
      // all 全部数据
      // part 部分数据
      this.recordData.dataType = dataType;
      // 携带的数据
      this.recordData.data = data;

      this.setSelect(this.activeId);
    }
    this.$MITT_BUS.on('reset-hushu-area', resetHushuArea)
  },
  unmounted() {
    this.$MITT_BUS.off('reset-hushu-area', resetHushuArea)
    resetHushuArea = () => { }
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    // 初始化面积 全部
    initAreaOrigin() {
      let cateData = [{
        value: 10,
        name: '12345'
      }, {
        value: 3,
        name: '胶心办'
      }, {
        value: 2,
        name: '统一服务热线'
      }]
      let mainTotal = cateData.map(v => v.value).reduce((a, b) => { return a + b }, 0)
      EchartsRenderArea(cateData, parseInt(mainTotal))
    },
    setSelect(e) {
      if (MyChart) {
        MyChart.dispose();
      }
      this.initAreaOrigin();
    }
  }
});
</script>
<template>
  <div class="section-two">
    <GlobalCard :mainTitle="'投诉渠道统计'" @change="(e) => { setSelect(e) }">
      <template #body>
        <!-- 代码 -->
        <div id="Gongretongji-B" v-loading="true">

        </div>
      </template>
    </GlobalCard>
  </div>
</template>
<style scoped lang="less">
.section-two {
  position: fixed;
  top: 43rem;
  right: 44rem;
}

#Gongretongji-B {
  width: 100%;
  height: 25rem;
}
</style>